<template>

  <div>
    <MyHeader
      background='orange'
      title="购物车"
    ></MyHeader>
    <div class="main">
      <MyGoods
        v-for="obj in list"
        :key="obj.id"
        :goodsObj="obj"
      ></MyGoods>
    </div>

    <MyFooter
      @changeCheck='changeFn'
      :arr='list'
    ></MyFooter>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader'
import MyGoods from './components/MyGoods'
import MyFooter from './components/MyFooter'
export default {
  data () {
    return {
      list: []
    }
  },
  components: {
    MyHeader,
    MyGoods,
    MyFooter
  },
  created () {
    this.$axios({
      url: "/api/cart"
    }).then(res => {
      this.list = res.data.list
    })
  },
  methods: {
    changeFn (bool) {
      this.list.forEach(obj => obj.goods_state = bool)
    }
  }

}
</script>


<style scoped>
.main {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>